<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>我也有{{num}}位妹子迷恋我</h1>
        <hello :title="title" :num1="num" @add="add"></hello>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const hello1 = {
        template:"<div>" +
        "<button @click='incr'>点我呀</button><h1>大家好，我是{{name}}。" +
        "{{title}}，有{{num1}}位妹子迷恋我，</h1></div>",
        data(){
            return {
                name: "余栋"
            }
        },
        //props: ['title1', "num1"]
        props: {
            title: {
                type: String,
                default: "xxxxx",
                required: true
            },
            num1: {
                type: Number
            }
        },
        methods: {
            incr(){
                this.$emit("add")
            }
        }
    };
    const vue = new Vue({
        el: "#app",
        data: {
            title: "玉树临风，风流倜傥",
            num: 100
        },
        components: {
            hello: hello1
        },
        methods: {
            add(){
                this.num++;
            }
        }
    })
</script>
</html>